<template>
  <div class="app-container">
    <!--查询-->
    <el-row :gutter="12" style="margin-bottom: 25px">
      <el-card shadow="hover">
        <span>订单号 </span>
        <el-input v-model="orderNo" placeholder="请输入需要查询的订单号" style="width: 200px"></el-input>
        <el-button type="success" style="margin-left: 10px">查询</el-button>
      </el-card>
    </el-row>
    <!--列表-->
    <el-row :gutter="12">
      <el-col :span="24">
        <el-card shadow="hover">
          <el-menu :default-active="0" class="el-menu-demo" mode="horizontal" @select="handleSelect">
            <el-menu-item :index="0">全部</el-menu-item>
            <el-menu-item
              v-for="(state, i) in orderState"
              :key="i+1"
              :index="i+1"
            >
              {{ state }}
            </el-menu-item>
          </el-menu>
          <div class="line"></div>
          <el-table
            style="margin-top: 10px"
            :data="list"
            element-loading-text="Loading"
            border
            fit
            highlight-current-row
          >
            <el-table-column type="selection" width="55"/>
            <el-table-column label="订单号" prop="orderNo"/>
            <el-table-column label="商品信息" prop="skuCode"/>
            <el-table-column label="订单金额" prop="money"/>
            <el-table-column label="买家昵称" width="110" prop="buyerId" align="center"/>
            <el-table-column label="团购编号" width="110" align="center" prop="group_id"/>
            <el-table-column class-name="status-col" label="订单状态" width="110" align="center">
              <template slot-scope="scope">
                <el-tag>{{ orderState[scope.row.state - 1] }}</el-tag>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="created_at" label="创建时间" width="200">
              <template slot-scope="scope">
                <i class="el-icon-time"/>
                <span>{{ scope.row.gmt_create }}</span>
              </template>
            </el-table-column>
            <el-table-column label="查看详情" width="110" align="center">
              <template>
                <el-button type="text" style="color: #07c160">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--    分页   -->
          <div class="block" style="padding-top: 15px;float: right">
            <el-pagination
              :current-page="currentPage"
              :page-sizes="[1,5, 10,20]"
              :page-size="pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="list.length"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            >
            </el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      orderNo: '',
      pageSize: 5,
      pageCount: 20,
      currentPage: 1, /* 当前页码 */
      total: 20,
      orderState: ['已支付', '已签收', '待退款', '已取消'],
      list: [
        { orderNo: 1, buyer_id: 2, group_id: 2, state: 1, gmt_create: '2023-4-10' },
        { orderNo: 2, buyer_id: 2, group_id: 5, state: 2, gmt_create: '2023-4-10' },
        { orderNo: 3, buyer_id: 2, group_id: 3, state: 3, gmt_create: '2023-4-10' },
        { orderNo: 4, buyer_id: 1, group_id: 2, state: 4, gmt_create: '2023-4-10' },
        { orderNo: 5, buyer_id: 1, group_id: 5, state: 4, gmt_create: '2023-4-10' },
        { orderNo: 6, buyer_id: 1111, group_id: 2222, state: 2, gmt_create: '2023-4-10' },
        { orderNo: 7, buyer_id: 22, group_id: 33, state: 2, gmt_create: '2023-4-11' },
        { orderNo: 8, buyer_id: 7, group_id: 474, state: 2, gmt_create: '2023-4-11' },
        { orderNo: 9, buyer_id: 523, group_id: 555, state: 2, gmt_create: '2023-4-11' },
        { orderNo: 10, buyer_id: 7474, group_id: 777, state: 4, gmt_create: '2023-4-11' },
        { orderNo: 11, buyer_id: 2, group_id: 233, state: 1, gmt_create: '2023-4-10' },
        { orderNo: 12, buyer_id: 2, group_id: 577, state: 2, gmt_create: '2023-4-10' },
        { orderNo: 13, buyer_id: 2, group_id: 312, state: 3, gmt_create: '2023-4-10' },
        { orderNo: 14, buyer_id: 1, group_id: 234, state: 4, gmt_create: '2023-4-10' },
        { orderNo: 15, buyer_id: 1, group_id: 56987, state: 4, gmt_create: '2023-4-10' },
        { orderNo: 16, buyer_id: 1111, group_id: 22223, state: 2, gmt_create: '2023-4-10' },
        { orderNo: 17, buyer_id: 22, group_id: 3355, state: 2, gmt_create: '2023-4-11' },
        { orderNo: 18, buyer_id: 7, group_id: 474469, state: 2, gmt_create: '2023-4-11' },
        { orderNo: 19, buyer_id: 523, group_id: 555789, state: 2, gmt_create: '2023-4-11' },
        { orderNo: 20, buyer_id: 7474, group_id: 777888, state: 4, gmt_create: '2023-4-11' }
      ]
    }
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key)
    },
    onSubmit() {
      console.log('submit!')
    },
    // 分页的方法
    /* 每页条数改变时，选择一页显示多少行 */
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
      this.currentPage = 1
      this.pageSize = val
    },
    /* 当前页面改变时，跳转其他页 */
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
    }
  }
}
</script>

<style>
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 2px solid #07c160;
}

.el-button--success {
  background-color: #07c160;
}
</style>
